<script setup lang="ts" name="PromotionArticleProperty">
import { PromotionArticleProperty } from './config'
import { usePropertyForm } from '@/components/Designer/utils/index'
import { ArticleApi, ArticleType } from '@/api/mall/promotion/article'

// 营销文章属性面板

const props = defineProps<{ modelValue: PromotionArticleProperty }>()
const emit = defineEmits(['update:modelValue'])
const { formData } = usePropertyForm(props.modelValue, emit)
// 文章列表
const articles = ref<ArticleType[]>([])

// 加载中
const loading = ref(false)
// 查询文章列表
const queryArticleList = async (title?: string) => {
  loading.value = true
  const { list } = await ArticleApi.page({ title, pageSize: 10 })
  articles.value = list
  loading.value = false
}

// 初始化
onMounted(() => {
  queryArticleList()
})
</script>

<template>
  <MallProperty v-model="formData.style">
    <ElForm label-width="40px" :model="formData">
      <ElFormItem label="文章" prop="id">
        <ElSelect v-model="formData.id" placeholder="请选择文章" class="w-full" filterable remote :remote-method="queryArticleList" :loading="loading">
          <ElOption v-for="article in articles" :key="article.id" :label="article.title" :value="article.id" />
        </ElSelect>
      </ElFormItem>
    </ElForm>
  </MallProperty>
</template>

<style scoped lang="scss"></style>
